<template>
	<view class="p-20 bb">
		<!-- 搜索框 - 固定定位 -->
		<view class="search-container fixed-search">
			<view class="search-input-wrapper">
				<text class="iconfont icon-sousuo4 search-icon"></text>
				<input type="text" class="search-input" v-model="searchKeyword" placeholder="请输入搜索关键词"
					confirm-type="search" @confirm="handleSearch" />
			</view>
			<button class="search-btn" @click="handleSearch">搜索</button>
		</view>

		<!-- 内容容器 - 添加上边距以避免被固定搜索框遮挡 -->
		<view class="content-container">
			<!-- 新闻列表 -->
			<view class="news-list">
				<view @click="toPageDesc(item)" class="news-item" v-for="(item, index) in dataList" :key="index">
					<image class="news-image" :src="$timer.ensureUrl(item.image)" />
					<view class="news-content">
						<view class="news-title-container">
							<text class="news-title line-2">{{item.title || ''}}</text>
						</view>
						<view class="news-tag">
							{{item.config.name || ''}}
						</view>
						<view class="news-footer">
							<text class="news-date">{{$u.timeFormat(item.create_time, 'yyyy-mm-dd')}}</text>
							<view class="news-views">
								<image class="news-views-icon"
									src="https://yjgs.jsonbug.com/storage/default/20250312/17421739645774636474.png" />
								<text class="news-views-count">{{item.number || 0}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<uni-load-more :status="loadMoreStatus" v-if="dataList.length > 0" />
		</view>
		<!-- end -->
		
		<!-- 暂无数据显示 -->
		<emptyPage v-if="dataList.length == 0" title="暂无记录～"></emptyPage>
		<!-- end -->
		
	</view>
</template>

<script>
	import emptyPage from "@/pages/extend/components/emptyPage.vue";
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		comNews
	} from '@/api/extend.js'
	export default {
		components:{
			emptyPage
		},
		data() {
			return {
				title: '',
				current_page: 1,
				cid: '', //商会id,
				tid: '', //分类ID
				dataList: [],
				loadMoreStatus: 'more', // 加载状态：more-加载前 loading-加载中 noMore-没有更多
				pageSize: 10, // 每页数据条数
				searchKeyword: '' // 搜索关键词
			}
		},
		
		computed: {
			...configMap({}, mapGetters(['isLogin', 'uid', 'userInfo'])),
			chamberObj() {
				return this.$store.state.extend.chamberObj
			},
		},
		// #ifdef MP
		onShareAppMessage: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: this.chamberObj.nickname + '/' + this.title || '',
				path: `pages/extend/chamber/news_more?uid=${this.uid || -1}&cid=${this.cid}&tid=${this.tid}`,
			}
		},
		onShareTimeline: function() {
			return {
				title: this.chamberObj.nickname + '/' + this.title || '',
				query: {
					uid: this.uid,
				},
				imageUrl: ''
			}
		},
		// #endif
		methods: {
			// 处理搜索按钮点击或输入框确认事件
			handleSearch() {
				// 重置页码并重新加载数据
				this.current_page = 1;
				this.dataList = [];
				this.getList();
			},

			getList(isLoadMore = false) {
				if (this.loadMoreStatus === 'loading' || (isLoadMore && this.loadMoreStatus === 'noMore')) return;

				this.loadMoreStatus = 'loading';

				const page = isLoadMore ? this.current_page + 1 : 1;

				comNews({
					com_id: this.cid,
					config_id: this.tid,
					page: page,
					limit: this.pageSize,
					title: this.searchKeyword, // 搜索字段使用searchKeyword
				}).then(res => {

					const newData = res.data.data || [];
					const title = res?.data?.config?.name || '商会动态';
					this.title = title;
					uni.setNavigationBarTitle({
						title: title
					})

					// 如果是加载更多，则追加数据，否则替换数据
					if (isLoadMore) {
						this.dataList = [...this.dataList, ...newData];
					} else {
						this.dataList = newData;
					}

					this.current_page = res.data.current_page;

					// 判断是否已经加载完全部数据
					if (!newData.length || (res.data.last_page && this.current_page >= res.data.last_page)) {
						this.loadMoreStatus = 'noMore';
					} else {
						this.loadMoreStatus = 'more';
					}
				}).finally(() => {
					if (this.loadMoreStatus === 'loading') {
						this.loadMoreStatus = 'more';
					}
				});
			},

			// 加载更多数据
			loadMore() {
				this.getList(true);
			},

			// 跳转到详情页
			toPageDesc(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url:  '/pages/extend/chamber/news_details?nid=' + item.id + '&cid=' + this.cid
					})
				} else {
					wx.openOfficialAccountArticle({
						url: item.url, // 此处填写公众号文章连接
						success: res => {
							// 用于记录阅读数量
							newDetail({
								id: item.id
							})
						},
						fail: res => {}
					})
				}
			}
		},
		onLoad(options) {
			this.cid = options.cid;
			this.tid = options.tid;
			this.getList();
		},
		// 上拉触底事件
		onReachBottom() {
			this.loadMore();
		}
	}
</script>

<style lang="scss" scoped>
	/* 搜索框样式 */
	.search-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
	}

	/* 固定搜索框样式 */
	.fixed-search {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #f8f8f8;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 内容容器样式 - 添加上边距避免被固定搜索框遮挡 */
	.content-container {
		margin-top: 100rpx;
	}

	.search-input-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 0 20rpx;
		height: 60rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.search-icon {
		font-size: 28rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 26rpx;
	}

	.search-btn {
		margin-left: 15rpx;
		background-color: #FF2E2E;
		color: #FFFFFF;
		font-size: 24rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 30rpx;
		border-radius: 30rpx;
		border: none;
		min-width: 0;
	}

	/* 新闻列表样式 */
	.news-list {
		margin-top: 20rpx;
	}

	.news-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 15rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		height: 200rpx;
	}

	.news-image {
		width: 192rpx;
		height: 150rpx;
		border-radius: 6rpx;
		flex-shrink: 0;
	}

	.news-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		position: relative;
		height: 100%;
	}

	.news-title-container {
		margin-bottom: 10rpx;
	}

	.news-title {
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		font-weight: 700;
		color: #000000;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 42rpx;
	}

	.news-tag {
		padding: 0 10rpx;
		background-color: #FF2E2E;
		color: white;
		font-size: 26rpx;
		border-radius: 6rpx;
		display: inline-block;
		position: absolute;
		top: 85rpx;
	}

	.news-footer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 0;
		width: 95%;
	}

	.news-date {
		font-size: 26rpx;
		color: #666666;
	}

	.news-views {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.news-views-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.news-views-count {
		margin-left: 8rpx;
		font-size: 24rpx;
		color: #999999;
	}
</style>